
<!doctype html>
<html>
    <head>
        <title>test page template</title>
        <style>
            #demo {
                overflow:scroll;
                margin-top:5em;
            }
        
            .w { 
                width:5em;
                padding:1em;
                position:absolute;
                border: 1px solid black;
                z-index:5;              
            }
            ._jsPlumb_connector {
                z-index:4;
            }
            
            ._jsPlumb_endpoint {
                z-index:6;
            }

            .dragHover { border:1px dotted red; }

            body { 
    background-color: #E0E0E0;
    /*font-size: 90%;*/
    /*background-image: url(../img/dynamicAnchorBg.jpg); */
    font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;;
}



a {
    text-decoration: none;
    color: #01a3c6;
    font-weight: bold;
    padding: 0.3em;
    border-radius: 0.2em;
}

a:hover {
    color: #1b911b;
    background-color: #f0f0f0;
}

path, ._jsPlumb_endpoint {
    cursor: pointer;
}


div.canvas-wrapper {
    position: absolute;
    display: block;
}

div.canvas {
    width: 80%;
    height: 300px;
    margin-left: 3px;
    margin-top: -50px; /* space reserve for top toolbar */
    position: relative;
}

div.action_prestyle {
    font-size: 12px;
    color: #C9C9C9;
    padding: 3px 5px;
    position: absolute;
    z-index: 4;
    /*border: 1px solid #808080;*/
    box-shadow: 0px 0px 5px 0px #292929;
    -o-box-shadow: 0px 0px 5px 0px #292929;
    -webkit-box-shadow: 0px 0px 2px 0px #292929;
    -moz-box-shadow: 0px 0px 5px 0px #292929;
    border-radius: 5px;
    opacity: 0.8;
    filter: alpha(opacity=80);
    cursor: move;
    background-color: #141414;
    background: -webkit-linear-gradient(top, #2E2E2E, #000000);
    background: -moz-linear-gradient(top, #2E2E2E, #000000);
    background: -ms-linear-gradient(top, #2E2E2E, #000000);
    background: -o-linear-gradient(top, #2E2E2E, #000000);
    background: linear-gradient(top, #2E2E2E, #000000);
}

div.action_default {
    width: 100px;
}

div.action_shortbox {
    width: 60px;
}

div.action_icon_only {
    width: 20px;
    height: 20px;
    /*
    border: none;
    background: none;
    background-color: transparent;
    box-shadow: none;
    */
}

div.action_icon_only p {
    display: none
}

div.action_prestyle p {
    margin: 0px 0px 0px 25px;
}

div.action-icon {
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    
    cursor: pointer;
    
}

.pointer-label {
    font-size: 12px;
    color: #000000;
    padding-bottom: 40px;
}


/*
._jsPlumb_connector {
border:1px solid blue;
}
._jsPlumb_endpoint {
border:1px solid green;
}
._jsPlumb_overlay {
border:1px solid yellow;
}
*/

</style>

<style>

            
        </style>
    </head>
    <body>
        <div class="canvas-wrapper">
    <div id="canvas" class="canvas">
        <div id="from" class="action_prestyle" style="top: 110px; left: 15px; background-color: rgb(11, 99, 158);">
            <div class="action-icon">
                <img border="0" src="http://findicons.com/files/icons/1035/human_o2/128/media_playback_start.png" width="20" height="20">
            </div>
            <p>from</p>
        </div>
        <div id="to" class="action_prestyle" style="top: 246px; left: 308px; background-color: rgb(11, 99, 158);">
            <div class="action-icon">
                <img border="0" src="http://findicons.com/files/icons/1035/human_o2/128/media_playback_start.png" width="20" height="20">
            </div>
            <p>to</p>
        </div>
    </div>
</div>
    
        <script type="text/javascript" src="../../js/lib/jquery-1.6.3-min.js"></script>
        <script type="text/javascript" src="../../js/lib/jquery-ui-1.8.13-min.js"></script>
        <script type="text/javascript" src="../../js/lib/jsBezier-0.3-min.js"></script>
        <!-- main jsplumb engine -->
        <script type="text/javascript" src="../../js/1.3.8/jsPlumb-1.3.8-RC1.js"></script>
        <!-- connectors, endpoint and overlays  -->
        <script type="text/javascript" src="../../js/1.3.8/jsPlumb-defaults-1.3.8-RC1.js"></script>     
        <!-- state machine connectors -->
        <script type="text/javascript" src="../../js/1.3.8/jsPlumb-connectors-statemachine-1.3.8-RC1.js"></script>      
        <!-- SVG renderer -->
        <script type="text/javascript" src="../../js/1.3.8/jsPlumb-renderers-svg-1.3.8-RC1.js"></script>
        <!-- canvas renderer -->
        <script type="text/javascript" src="../../js/1.3.8/jsPlumb-renderers-canvas-1.3.8-RC1.js"></script>
        <!-- vml renderer -->
        <script type="text/javascript" src="../../js/1.3.8/jsPlumb-renderers-vml-1.3.8-RC1.js"></script>
        <!-- jquery jsPlumb adapter -->
        <script type="text/javascript" src="../../js/1.3.8/jquery.jsPlumb-1.3.8-RC1.js"></script>                                           
        
        <script>                
            jsPlumb.ready(function() {
                jsPlumb.Defaults.Anchor = "Continuous";
jsPlumb.Defaults.HoverPaintStyle = {
    strokeStyle: "#42a62c",
    lineWidth: 2
};

var connection = jsPlumb.connect({
    source: 'from',
    target: 'to',
    paintStyle: {
        strokeStyle: 'black',
        lineWidth: 2,
        fillStyle: '#456'
    },
    connector: 'Straight',
    overlays:[
        ["Label", {
            label: 'Sample Label',
            location: 0.5,
            id: 'label',
            cssClass: 'pointer-label'
        }],
        ["Arrow", {
            location: 1,
            length: 20,
            width: 15,
            id: 'arrow',
            foldback: 0.9
        }]
        
    ]
});
                
            });
        </script>
    </body>
</html>
